<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax 数据请求</title>
  </head>
  <body>
    <ul id="members"></ul>
    <script>
      // js 异步主动请求数据 界面的动态更新
      // console.log(fetch('https://api.github.com/orgs/lemoncode/members'))
      // url 接口地址
      // 网络请求 request
      // response
      // toJSON
      // dom
      // httpRequest XML? 可以主动发起http 请求响应是（XML） JSON的对象
      const xhr = new XMLHttpRequest();
      console.log(xhr.readyState, "------");
      // 打开一个请求
      // false 同步请求 true 异步请求
      xhr.open("GET", "https://api.github.com/orgs/lemoncode/members", false);
      // 真正发送出去
      console.log(xhr.readyState, "|------");
      xhr.send();
      console.log(xhr.readyState, "|---|---");
      // 事件监听
      console.log("///////");
      console.log(xhr.responseText);
      // xhr.onreadystatechange = function() {
      //   console.log(xhr.readyState, '|---|---|');
      //   // 响应的状态码
      //   // readyState 4 表示请求完成
      //   if (xhr.status === 200 && xhr.readyState === 4) {
      //     console.log(xhr.responseText);
      //     const data = JSON.parse(xhr.responseText);
      //     console.log(data);
      //     document.getElementById('members').innerHTML =
      //       data.map(item => `<li>${item.login}</li>`).join('');
      //   }
      // }
    </script>
  </body>
</html>
